
.__chat_list_item{
	padding: 12px 16px;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	cursor: pointer;
	transition: all .1s;
	&:hover{
		background-color: var(--list-item-hover-default-color, #F4F6F7);
	}
	&.active{
		background-color: var(--list-item-hover-default-color, #F4F6F7);
	}
	.__avatar_container{
		flex-shrink: 0;
	}
	.__chat_message{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		padding-left: 8px;
		overflow: hidden;
		p{
			width: 100%;
			word-break: break-all;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.__chat_name{
			width: 100%;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			height: 20px;
			line-height: 20px;
			.__name{
				flex: 1;
				font-size: var(--font-default-size, 14px);
				color: var(--text-main-color, #1D2221);
				padding-right: 8px;
			}
			.__time {
				flex-shrink: 0;
				font-size: var(--font-small-size, 12px);
				color: var(--text-prompt-color, #CDD0D4);
			}
		}
		.__chat_news{
			font-size: var(--font-small-size, 12px);
			color: var(--text-secondary-color, #8D8D8D);
			height: 18px;
			line-height: 18px;
		}
	}
}
